<template>
	<view class="content">
		<view class="status_bar" :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar backgroundColor="#2979ff" color="#fff" :border="false" title="小树照相馆"></uni-nav-bar>
		<view class="obgcolor"></view>
		<view class="topBox">
			<uni-row>
				<uni-col :span="6">
					<image class="avatar" mode="widthFix" src="../../static/logo.png"></image>
				</uni-col><uni-col :span="18">
					<view class="textrs">132465798</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="8">
					<view class="order bd-r">
						<view class="tit">13</view>
						<view class="name">我的预约</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="order bd-r">
						<view class="tit">13</view>
						<view class="name">我的原图</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="order">
						<view class="tit">13</view>
						<view class="name">我的精修</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="lineBox">
			<uni-list>
				<uni-list-item :showExtraIcon="true" :extra-icon="chatbubble" title='关于我们' link
					to="/pages/vue/index/index" @click="onClick($event,1)"></uni-list-item>
			</uni-list>
			<uni-list>
				<uni-list-item :show-extra-icon="true" :extra-icon="chatbubble" title='联系客服' link
					to="/pages/vue/index/index" @click="onClick($event,1)" rightText="wx123465"></uni-list-item>
			</uni-list>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				chatbubble: 'chatbubble'
			}
		},
		onReady() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.bd-r {
		border-right: 1rpx solid #ddd;
	}

	.lineBox {
		width: 690rpx;
		margin: 50rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.order {
		margin: 50rpx auto 10rpx;
		// padding: 10rpx 0;
		text-align: center;

		.tit {
			font-size: 34rpx;
		}

		.name {
			line-height: 50rpx;
			color: #999;
			font-size: 24rpx;
		}
	}

	.topBox {
		background: #fff;
		width: 650rpx;
		margin: 0 auto;
		padding: 20rpx;
		border-radius: 20rpx;

		.avatar {
			width: 120rpx;
			border-radius: 120rpx;
		}

		.textrs {
			line-height: 120rpx;
		}
	}

	.obgcolor {
		width: 200vw;
		height: 200vw;
		position: fixed;
		top: -140vw;
		left: -50vw;
		border-radius: 200vw;
		// border-radius: 0 0 20vw 20vw;
		background-color: #2979ff;
		z-index: -1;
	}
</style>